<template>
  <div class="hello">
    <!-- <div style="width: 512px; height: 300px; margin: auto">
      <LivePlayer videoUrl="video.mp4" />
    </div> -->
    <div style="width: 512px; height: 300px; margin: auto" class="palyer2">
      <LivePlayer
        ref="player2"
        videoUrl="rtmp://58.200.131.2:1935/livetv/hunantv"
        live
      ></LivePlayer>
      <!-- <LivePlayer :videoUrl="videoUrl" fluent autoplay live stretch></LivePlayer> -->
    </div>
 
    <br />
    <br />
  </div>
</template>


<script>
import LivePlayer from '@liveqing/liveplayer'

export default {
    // 未试用成功，一直提示：videojs is not defined
//   name: "LivePlayerDemo",
  components: {
    LivePlayer,
  },
  methods: {
    pause: function () {
      this.$refs.player2.pause();
    },
    play: function () {
      this.$refs.player2.play();
    },
    snap: function () {
      this.$refs.player2.snap();
    },
    snapOutside: function (snapData) {
      alert(snapData);
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
  cursor: pointer;
}

a {
  color: #42b983;
}
</style>
